<template>
	<view class="search_wrap">
		<view class="flex-col justify-start section_5">
			<view class="flex-row justify-between items-center section_6">
				<view class="flex-row items-center">
					<image class="image_8" :src="remoteUrl + 'search_icon.png'" />
					<input class="text_3 ml-8" type="text" placeholder="搜索" :value="searchVal" @input="bindinput" />
				</view>
				<view class="flex-col justify-start items-center button" v-if="searchFlag" @click="searchBtn()"><text
						class="text_4">搜索</text></view>
				<view class="flex-col justify-start items-center button" v-else @click="closeSearch()"><text
						class="text_4">取消</text></view>
			</view>
		</view>
		<scroll-view scroll-y="true" style="height: calc(100vh - 130rpx);">
			<view class="list_wrap">
				<view class="flex-col list-item mt-10" v-for="(item,index) in list">
					<view class="flex-row justify-between items-center">
						<text class="font_5">{{ item.title }}</text>
						<view class="flex">
							<view class="flex-col justify-start items-center text-wrapper view" v-if="item.type_id == 1">
								<text class="font_6">供</text>
							</view>
							<view class="flex-col justify-start items-center text-wrapper need" v-if="item.type_id == 2">
								<text class="font_6">需</text>
							</view>
							<view class="flex-col justify-start items-center text-wrapper not" v-if="item.status == 0">
								<text class="font_6">未解决</text>
							</view>
							<view class="flex-col justify-start items-center text-wrapper already" v-if="item.status == 1">
								<text class="font_6">已解决</text>
							</view>
						</view>
					</view>
					<rich-text class="font_7 mt-14 row_1" :nodes="item.content"></rich-text>
					<view class="flex-row justify-between items-center mt-14">
						<view class="flex-row items-center">
							<image class="image_9" :src="ossUrl + item.user_avatar" />
							<text class="font_8 text_10">{{ item.user_name }}</text>
							<view class="section_10"></view>
							<text class="font_8 text_31">{{ item.user_company_name }}</text>
						</view>
						<text class="font_9 text_12">{{ item.createtime }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		remoteUrl,
		ossUrl
	} from '@/utils/config.js'
	import {
		task_list
	} from '@/api/home.js'
	export default {
		data() {
			return {
				ossUrl: ossUrl,
				remoteUrl: remoteUrl,
				searchVal: '',
				searchFlag: true,
				list: []
			}
		},
		onLoad() {
			this.taskListFun()
		},
		onShareAppMessage(res) { //发送给朋友
			return {
				title: '小程序分享',
				imageUrl: '',
			}
		},
		methods: {
			taskListFun() {
				task_list({
					title: this.searchVal
				}).then(res => {
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			bindinput(e) {
				this.searchVal = e.detail.value
			},
			searchBtn() {
				this.searchFlag = false
				this.taskListFun()
			},
			closeSearch() {
				this.searchVal = ''
				this.searchFlag = true
				this.taskListFun()
			},
		}
	}
</script>

<style scoped lang="scss">
	.search_wrap {
		height: 100vh;
		background: #F5F5F5;
		.section_5 {
			height: 120rpx;
			padding: 16rpx 0;
			background-color: #ffffff;
			border-bottom: solid 1rpx #d9d9d9;

			.section_6 {
				margin: 0 30rpx;
				padding: 4rpx 5rpx 4rpx 28rpx;
				background-color: #ffffff;
				border-radius: 58rpx;
				border: solid 1rpx #e1e1e1;

				.image_8 {
					opacity: 0.9;
					width: 28rpx;
					height: 28rpx;
				}

				.text_3 {
					color: #000000;
					font-size: 28rpx;
				}

				.button {
					padding: 20rpx 0;
					background-color: #1c41f1;
					border-radius: 54rpx;
					width: 124rpx;
					height: 68rpx;

					.text_4 {
						color: #ffffff;
						font-size: 32rpx;
						line-height: 29.26rpx;
					}
				}
			}
		}

		.list_wrap {
			.list-item {
				width: 690rpx;
				margin: 20rpx auto;
				padding: 22rpx 11.86rpx 16rpx 17.72rpx;
				background-color: #ffffff;
				border-radius: 12rpx;
				border: solid 2rpx #1c41f1;
			
				.font_5 {
					font-size: 30rpx;
					font-family: PingFang SC;
					color: #000000;
				}
			
				.text-wrapper {
					margin-right: 10rpx;
			
					.font_6 {
						font-size: 24rpx;
						font-family: PingFang SC;
						color: #ffffff;
					}
				}
			
				.view {
					padding: 3rpx 7rpx;
					background-color: #70d042;
					border-radius: 4rpx;
				}
			
				.need {
					padding: 3rpx 7rpx;
					background-color: #f8d53a;
					border-radius: 4rpx;
				}
			
				.not {
					padding: 3rpx 7rpx;
					background-color: #999999;
					border-radius: 4rpx;
				}
				.already {
					padding: 3rpx 7rpx;
					border-radius: 4rpx;
					background: #1C41F1;
				}
			
				.font_7 {
					font-size: 24rpx;
					font-family: PingFang SC;
					color: #000000;
				}
			
				.image_9 {
					border-radius: 20rpx;
					width: 40rpx;
					height: 40rpx;
				}
			
				.font_8 {
					font-size: 22rpx;
					font-family: PingFang SC;
					color: #000000;
				}
			
				.text_10 {
					margin-left: 9.08rpx;
				}
			
				.section_10 {
					margin-left: 15.92rpx;
					background-color: #d9d9d9;
					width: 2rpx;
					height: 24rpx;
				}
			
				.text_31 {
					margin-left: 14.84rpx;
				}
			
				.font_9 {
					font-size: 20rpx;
					font-family: PingFang SC;
					color: #000000;
				}
			
				.text_12 {
					margin-right: 4rpx;
				}
			}
		}
	}
</style>